<template>
  <div>
    <el-dialog title="新增设备" :visible="addVisible" width="40%" @close="cancel" @opened="opened">
      <template class="content">
        <el-form ref="form" :model="TypeForm" :rules="rules">
          <el-form-item label="设备编号：" :label-width="formLabelWidth">
            系统自动生成
          </el-form-item>
          <el-form-item label="选择型号：" prop="vmType">
            <el-select placeholder="请选择" v-model="TypeForm.vmType">
              <el-option v-for="item in AddForm.type" :key="item.typeId" :label="item.name" :value="item.typeId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择点位：" prop="nodeId">
            <el-select placeholder="请选择" v-model="TypeForm.nodeId">
              <el-option v-for="item in AddForm.node" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getVmNodeSearch, getVmTypeSearch, addVmTypeManager } from '@/api/Equipment'
export default {
  props: {
    addVisible: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data () {
    return {
      TypeForm: {
        vmType: '',
        nodeId: '', // 多个数据
        createUserId: '1'
      },
      AddForm: {
        type: [],
        node: []
      },
      rules: {
        vmType: [
          { required: true, message: '请输入', trigger: 'submit' }
        ],
        nodeId: [
          { required: true, message: '请输入', trigger: 'submit' }
        ]
      },
      formLabelWidth: '100px',
      page: {
        pageIndex: 1,
        pageSize: 100000
      }
    }
  },
  methods: {
    async opened () {
      this.addForm(this.page)
    },
    // 添加
    async addForm (page) {
      const { data: { currentPageRecords: node } } = await getVmNodeSearch(page)
      const { data: { currentPageRecords: type } } = await getVmTypeSearch(page)
      this.AddForm.type = type
      this.AddForm.node = node
      // console.log(node)
      // console.log(type)
    },

    cancel () {
      this.$emit('update:addVisible', false)

      this.$refs.form.resetFields()
      this.TypeForm = {
        vmType: '',
        nodeId: '', // 多个数据
        createUserId: '1'
      }
    },
    async submit () {
      this.$refs.form.validate(async isOk => {
        if (isOk) {
          await addVmTypeManager(this.TypeForm)
          this.cancel()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  .el-dialog__body {
    padding: 30px 20px;
  }
  .el-form-item {
    padding: 0 50px
  }
  .el-dialog__title {
    font-size: 16px;
  }
  .el-select {
  width: 360px;
}
}
</style>
